<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com">跳转</a>

    <form action="">
        <p><label for="">用户名:</label><input type="text" name="user"></p>
        <p><label for="">密&emsp;码:</label><input type="text" name="pwd"></p>
        <p>
            <input type="submit" class="subBtn" value="注册">
            <input type="reset" class="canBtn" value="取消">
        </p>
    </form>
</body>
<script>
    // 浏览器的默认行为
    // 1. a标签的默认跳转
    // 2. 表单的默认提交
    // 3. f5的默认刷新
    // 3. 鼠标右键默认菜单

    // 阻止浏览器的默认行为   => 借助事件对象的方法
    // 1. 阻止a标签的默认跳转
    // 2. 阻止表单的默认提交
    // 3. 阻止f5的默认刷新
    // 4. 阻止鼠标右键默认菜单

    // 常规浏览器
    // e.preventDefault();
    // 低版本IE
    // e.returnValue = false;  // return false;

    // 兼容
    // if( e.preventDefault){
    //     e.preventDefault();
    // }else{
    //     e.returnValue = false;   // return false;
    // }

    var a = document.getElementsByTagName("a")[0];
    var form = document.getElementsByTagName("form")[0];

    //阻止a标签的转跳
    a.onclick = function(e){
        var e = e || window.event;

        // 常规浏览器
        // e.preventDefault();

        // 低版本IE
        // e.returnValue = false;  // return false;
        // return false;

        if( e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue = false;   // return false;
        }


        // alert(1111);
    }

    //阻止提交刷新页面
    form.onsubmit = function(){
        var e = e || window.event;
        if( e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue = false;   // return false;
        }
        // return false;
    }
</script>
</html>